<!DOCTYPE html>
<html>
<head>
<title>Wave Motion Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="300" style="border:1px solid #ddd;"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Drawing properties
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 1.5;

// --- Point A (Observer) ---
const observerX = 100;
const observerY = 100;
const pointRadius = 5;
ctx.beginPath();
ctx.arc(observerX, observerY, pointRadius, 0, 2 * Math.PI);
ctx.stroke();
ctx.font = '20px Times New Roman';
ctx.fillText('A', observerX - 25, observerY + 7);

// --- Wave Source ---
const sourceX = 200;
const sourceY = 100;
ctx.beginPath();
ctx.arc(sourceX, sourceY, pointRadius, 0, 2 * Math.PI);
ctx.stroke();
ctx.font = '22px KaiTi';
ctx.fillText('波源', sourceX + 15, sourceY - 10);

// --- Velocity Vector v_S ---
const vectorStartX = sourceX; // Starts from the center of the source
const vectorStartY = 100;
const vectorEndX = 330;
const vectorEndY = 100;

// Arrow shaft
ctx.beginPath();
ctx.moveTo(vectorStartX, vectorStartY);
ctx.lineTo(vectorEndX, vectorEndY);
ctx.stroke();

// Arrowhead
ctx.beginPath();
ctx.moveTo(vectorEndX, vectorEndY);
ctx.lineTo(vectorEndX - 12, vectorEndY - 6);
ctx.moveTo(vectorEndX, vectorEndY);
ctx.lineTo(vectorEndX - 12, vectorEndY + 6);
ctx.stroke();

// Label for v_S
const labelX = vectorEndX - 70;
const labelY = vectorEndY + 30;
ctx.font = 'italic 20px Times New Roman';
ctx.fillText('v', labelX, labelY);
ctx.font = '14px Times New Roman';
ctx.fillText('S', labelX + 9, labelY + 5);

// --- Reflective Wall ---
const wallX = 430;
const wallYStart = 20;
const wallYEnd = 180;

// Vertical line
ctx.beginPath();
ctx.moveTo(wallX, wallYStart);
ctx.lineTo(wallX, wallYEnd);
ctx.stroke();

// Hatch marks
ctx.lineWidth = 1;
const hatchLength = 8;
const hatchSpacing = 9;
for (let y = wallYStart + hatchSpacing; y < wallYEnd + hatchSpacing; y += hatchSpacing) {
    ctx.beginPath();
    ctx.moveTo(wallX, y);
    // Slant is ///, from bottom-left to top-right
    ctx.lineTo(wallX + hatchLength, y - hatchLength);
    ctx.stroke();
}
ctx.lineWidth = 1.5; // Reset

// --- Bottom Label ---
ctx.font = '20px KaiTi';
ctx.textAlign = 'center';
ctx.fillText('习题 11-37 图', canvas.width / 2, 270);
</script>
</body>
</html>